<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>班级列表</title>
  <link rel="icon" href="favicon.ico" type="${pageContext.request.contextPath}/assert/image/ico">
  <link href="${pageContext.request.contextPath}/assert/css/bootstrap.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/assert/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="${pageContext.request.contextPath}/assert/css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <%--抽取公共部分进行封装起来，增加代码的复用性，减少代码的冗余！--%>
    <jsp:include page="_aside_header.jsp"></jsp:include>
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
          <div class="card">
            <div class="card-header"><h4>学生列表信息</h4></div>
            <div class="card-body">
              <form  id="form"  class="form-inline" style="margin-bottom: 20px" action="${pageContext.request.contextPath}/student" method="get">
<%--              默认查询第一页--%>
                <input type="hidden" id="currentPage" name="currentPage" value="1">
                <div class="form-group">
                  <label>学号</label>
                  <input class="form-control" type="text" name="sno" value="${sno}" placeholder="请输入学号..">
                </div>
                <div class="form-group">
                  <label>姓名</label>
                  <input class="form-control" type="text"  name="name" value="${name}" placeholder="请输入姓名..">
                </div>
                <div class="form-group">
                    <label>性别</label>
                    <select class="form-control"  name="gender" size="1">
                        <option value="">请选择</option>
                        <option <c:if test="${gender == 'm'}">selected</c:if> value="m">男</option>
                        <option <c:if test="${gender == 'w'}">selected</c:if> value="w">女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>班级编号</label>
                    <input class="form-control" type="text"  name="clazzNO" value="${clazzNO}" placeholder="请输入班级编号..">
                </div>
                <div class="form-group">
                    <button class="btn btn-brown btn-round" type="submit">搜索</button>
                    <c:if test="${sessionScope.role == 'admin'}">
                    <button class="btn btn-round btn-success" type="button" onclick="location.href='?r=add'">新增</button>
                    </c:if>
                </div>
              </form>
              <table class="table table-bordered">
                <thead>
                <tr>
                  <th>#</th>
                  <th>学号</th>
                  <th>密码</th>
                  <th>名字</th>
                  <th>电话</th>
                  <th>入学时间</th>
                  <th>年龄</th>
                  <th>性别</th>
                  <th>地址</th>
                  <th>班级号</th>
                  <c:if test="${sessionScope.role == 'admin'}">
                  <th>操作</th>
                  </c:if>
                </tr>
                </thead>
                <tbody>
<%--               后端传过来的数据 pageVo.list取出list里面的每一行元素并将其赋值给变量i--%>
                <c:forEach items="${pageVo.list}" var="i" varStatus="s">
                    <tr>
                        <!--获取当前的行数-->
                        <th scope="row">${s.count}</th>
                        <%--变量.属性名称一定要和实体类里面的属性名称一样否则会报错--%>
                        <td>${i.sno}</td>
                        <td>${i.password}</td>
                        <td>${i.name}</td>
                        <td>${i.tele}</td>
                        <td>${i.enterDate}</td>
                        <td>${i.age}</td>
                        <td>${i.gender == 'm' ? '男':(i.gender == 'w' ? '女':'')}</td>
                        <td>${i.address}</td>
                        <td>${i.clazz.clazzNo} / ${i.clazz.name}</td>
                        <c:if test="${sessionScope.role == 'admin'}">
                            <td>
<%--                            当用户点击第一个按钮的时候会触发onclick事件，会将当前页面的url地址栏后面自动拼接onclick属性的值，然后像后端发起get请求--%>
                            <button class="btn btn-round btn-success btn-xs" type="button" onclick="location.href='?r=edit&sno=${i.sno}'">编辑</button>
                            <button class="btn btn-round btn-danger btn-xs" type="button" onclick="del('${i.sno}')">删除</button>
                            </td>
                        </c:if>
                    </tr>
                </c:forEach>
                </tbody>
              </table>
               <jsp:include page="_pager.jsp"></jsp:include>
            </div>
          </div>
          </div>
        </div>
      </div>
    </main>
    <!--End 页面主要内容-->
  </div>
</div>
<jsp:include page="_js.jsp"></jsp:include>
<script type="text/javascript">

  //当页面加载完之后进行执行这个方法
  $(document).ready(function(e) {

  });
  function gotoPage(page){
      $("#currentPage").val(page)
      $("#form").submit()
  }
  function del(sno){
      lightyear.loading("show");
          $.ajax({
              type:"post",
              url:"student?r=del",
              data:{sno},//此处可以进行省略填写变量名
              dateType:"json",
              success:function (data){
                  if(data.success){
                      lightyear.loading('hide');
                      lightyear.url('${pageContext.request.contextPath}/student');
                      lightyear.notify(data.msg, 'success', 500);
                  }else {
                      lightyear.loading('hide');
                      lightyear.notify(data.msg, 'danger', 3000);
                  }
              },
              error:function (){
                  lightyear.loading('hide');
                  lightyear.notify("请求失败请检查！", 'danger', 3000);
              }
          })
  }
</script>
</body>
</html>